<template>
  <ul class="app-header-nav">
    <li class="home">
      <RouterLink to="/">首页</RouterLink>
    </li>
    <li v-for="item in $store.state.category.list" :key="item.id">
      <RouterLink active-class="active" v-if="item.id" :to="`/category/${item.id}`">{{item.name}}</RouterLink>
      <a v-else href="javascript:;">{{item.name}}</a>
    </li>
  </ul>
</template>

<script>
// 优化初始化导航栏白屏
// 原因:一开始,vuex里的数据式空的,2.5秒后才通过api获取,导致这2.5s内局部为白屏
// 处理:定义9个和后台一样的分类常量数据,在本地使用,填补这2.5s的空白
// bug:在这2.5s中点击了导航就回导致/category/undifinded
// 导入store
// import { useStore } from 'vuex'
export default {
  name: 'AppHeaderNav',
  setup() {
    return {}
  }
}
</script>

<style scoped lang='less'>
.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
      &.active {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
    &:hover {
      a {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
  }
}
</style>